<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Editable Table</title>
    <link rel="stylesheet" href="./bootstrap.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
            padding: 20px;
        }
        h1 {
            text-align: center;
            font-weight: bold;
            color: #444;
            margin-bottom: 20px;
        }
        h2 {
            color: #444;
            margin-bottom: 20px;
        }
        h3 {
            color: #444;
            margin-bottom: 20px;
        }
        .container {
            max-width: 1800px;
            margin: 0 auto;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        table {
            width: 100%;
            margin-top: 20px;
            table-layout: fixed;
        }
        th, td {
            text-align: center;
            vertical-align: middle;
            word-wrap: break-word;
        }
        th {
            background-color: #666;
            color: #fff;
        }
        .btn {
            margin: 2px;
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 1050;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.5);
        }
        .modal-content {
            background-color: #fff;
            margin: 5% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 700px;
            border-radius: 8px;
            position: relative;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
        }
        .error {
            color: red;
            font-weight: bold;
            margin-top: 10px;
        }
        .success {
            color: green;
            font-weight: bold;
            margin-top: 10px;
        }
        .form-check-input {
            margin-left: 0;
            transform: scale(1.5);
        }
        .select2-container {
            width: 100% !important;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>Expeditionary</h1>
    <h3>[开荒队成员列表]</h3>
    <button class="btn btn-primary" onclick="openAddModal()">新增记录</button>

    <!-- 新增记录弹窗 -->
    <div id="addModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddModal()">&times;</span>
            <h2 class="text-center mb-4">新增记录</h2>
            <form id="addRowForm">
                <div class="mb-3">
                    <label for="name" class="form-label">玩家名称/Name:</label>
                    <input type="text" class="form-control" id="name" name="name" required>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="free_start_time" class="form-label">每日在线时间(开始)/Free Start Time:</label>
                        <input type="time" class="form-control" id="free_start_time" name="free_start_time">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="free_end_time" class="form-label">每日在线时间(结束)/Free End Time:</label>
                        <input type="time" class="form-control" id="free_end_time" name="free_end_time">
                    </div>
                </div>
                <div class="mb-3">
                    <label for="occupation" class="form-label">职能/Occupation <br>按住Ctrl可以多选（Crtl+A全选):</label>
                    <select class="form-select" id="occupation" name="occupation" multiple size="4">
                        <option value="防护职业">防护职业/Tank</option>
                        <option value="纯粹治疗职业">纯粹治疗职业/Healer</option>
                        <option value="护罩治疗职业">护罩治疗职业/Healer with Shield</option>
                        <option value="近战职业">近战职业/Melee</option>
                        <option value="远程物理职业">远程物理职业/Ranged Physical</option>
                        <option value="远程魔法职业">远程魔法职业/Ranged Magic</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label for="volunteer_dungeon" class="form-label">志愿副本/Dungeon <br>按住Ctrl可以多选（Crtl+A全选):</label>
                    <select class="form-select" id="volunteer_dungeon" name="volunteer_dungeon" multiple size="4">
                        <option value="幻巧战">幻巧战</option>
                        <option value="极神(旧版本)">极神(旧版本)</option>
                        <option value="极神(当前版本)">极神(当前版本)</option>
                        <option value="零式(旧版本)">零式(旧版本)</option>
                        <option value="零式(当前版本)">零式(当前版本)</option>
                        <option value="暗黑之云诛灭战">暗黑之云诛灭战</option>
                        <option value="巴哈姆特绝境战">巴哈姆特绝境战</option>
                        <option value="究极神兵绝境战">究极神兵绝境战</option>
                        <option value="亚历山大绝境战">亚历山大绝境战</option>
                        <option value="幻想龙诗绝境战">幻想龙诗绝境战</option>
                        <option value="欧米茄绝境验证战">欧米茄绝境验证战</option>
                        <option value="光暗未来绝境战">光暗未来绝境战</option>
                    </select>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="level" class="form-label">职业等级/Level:</label>
                        <input type="number" class="form-control" id="level" name="level" min="1" max="100">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="guild_name" class="form-label">部队/Free-Company:</label>
                        <input type="text" class="form-control" id="guild_name" name="guild_name" value="Phantom">
                    </div>
                </div>
                <div class="mb-3">
                    <label for="notes" class="form-label">备注/Notes:</label>
                    <textarea class="form-control" id="notes" name="notes" rows="2"></textarea>
                </div>
                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="online_status" name="online_status">
                    <label for="online_status" class="form-check-label">可用状态/Status<br></label>
                </div>
                <div class="d-flex justify-content-between">
                    <button type="submit" class="btn btn-primary">Add</button>
                    <button type="button" class="btn btn-secondary" onclick="closeAddModal()">Cancel</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 编辑记录弹窗 -->
    <div id="editModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeEditModal()">&times;</span>
            <h2 class="text-center mb-4">编辑记录/Edit Row</h2>
            <form id="editRowForm">
                <input type="hidden" id="edit_uuid" name="uuid">
                <div class="mb-3">
                    <label for="edit_name" class="form-label">玩家名称/Name:</label>
                    <input type="text" class="form-control" id="edit_name" name="name" required>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="edit_free_start_time" class="form-label">每日在线时间(开始)/Free Start Time:</label>
                        <input type="time" class="form-control" id="edit_free_start_time" name="free_start_time">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="edit_free_end_time" class="form-label">每日在线时间(结束)/Free End Time:</label>
                        <input type="time" class="form-control" id="edit_free_end_time" name="free_end_time">
                    </div>
                </div>
                <div class="mb-3">
                    <label for="edit_occupation" class="form-label">职能/Occupation <br>按住Ctrl可以多选（Crtl+A全选):</label>
                    <select class="form-select" id="edit_occupation" name="occupation" multiple size="4">
                        <option value="防护职业">防护职业/Tank</option>
                        <option value="纯粹治疗职业">纯粹治疗职业/Healer</option>
                        <option value="护罩治疗职业">护罩治疗职业/Healer with Shield</option>
                        <option value="近战职业">近战职业/Melee</option>
                        <option value="远程物理职业">远程物理职业/Ranged Physical</option>
                        <option value="远程魔法职业">远程魔法职业/Ranged Magic</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label for="edit_volunteer_dungeon" class="form-label">志愿副本/Dungeon <br>按住Ctrl可以多选（Crtl+A全选):</label>
                    <select class="form-select" id="edit_volunteer_dungeon" name="volunteer_dungeon" multiple size="4">
                        <option value="幻巧战">幻巧战</option>
                        <option value="极神(旧版本)">极神(旧版本)</option>
                        <option value="极神(当前版本)">极神(当前版本)ion>
                        <option value="零式(旧版本)">零式(旧版本)</option>
                        <option value="零式(当前版本)">零式(当前版本)</option>
                        <option value="暗黑之云诛灭战">暗黑之云诛灭战</option>
                        <option value="巴哈姆特绝境战">巴哈姆特绝境战</option>
                        <option value="究极神兵绝境战">究极神兵绝境战</option>
                        <option value="亚历山大绝境战">亚历山大绝境战</option>
                        <option value="幻想龙诗绝境战">幻想龙诗绝境战</option>
                        <option value="欧米茄绝境验证战">欧米茄绝境验证战</option>
                        <option value="光暗未来绝境战">光暗未来绝境战</option>
                    </select>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="edit_level" class="form-label">职业等级/Level:</label>
                        <input type="number" class="form-control" id="edit_level" name="level" min="1" max="100">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="edit_guild_name" class="form-label">部队/Free-Company:</label>
                        <input type="text" class="form-control" id="edit_guild_name" name="guild_name">
                    </div>
                </div>
                <div class="mb-3">
                    <label for="edit_notes" class="form-label">备注/Notes:</label>
                    <textarea class="form-control" id="edit_notes" name="notes" rows="2"></textarea>
                </div>
                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="edit_online_status" name="online_status">
                    <label for="edit_online_status" class="form-check-label">可用状态/Status</label>
                </div>
                <div class="d-flex justify-content-between">
                    <button type="submit" class="btn btn-primary">更新记录/Update Row</button>
                    <button type="button" class="btn btn-secondary" onclick="closeEditModal()">取消/Cancel</button>
                </div>
            </form>
        </div>
    </div>

    <table id="myTable" class="table table-striped table-bordered">
        <thead>
        <tr>
            <th width="114px">玩家名称</th>
            <th width="160px" colspan="2">每日在线时间</th>
            <th >职能</th>
            <th >志愿副本</th>
            <th width="50px">等级</th>
            <th width="82px">部队</th>
            <th >备注</th>
            <th width="60px">状态</th>
            <th width="68px">Opt</th>
        </tr>
        </thead>
        <tbody>
        <!-- 行将在这里插入 -->
        </tbody>
    </table>
    <div id="message"></div>
</div>

<script src="editableTable.js"></script>

<!-- 引入访客统计模块 -->
<script src="../visitor-tracker.js"></script>
<!-- Cloudflare Web Analytics -->
<script defer src='../lib/cloudflare/beacon.min.js' data-cf-beacon='{"token": "0e55e488041949479a3dace73ef940cd"}'>
</script>
<!-- End Cloudflare Web Analytics -->

</body>
</html>